<template>
  <div class="left-content">
    <div class="panel panel-total">
      <div class="analyise-left">
        <i class="icon"></i>
        <div class="title">电量</div>
      </div>
      <div class="analyise-right">
        <div class="analyise-total">
          <div class="count-total">本月累计电量</div>
          <div class="progress progress-micro">
            <div class="bar" style="width: 60%;"></div>
          </div>
          <div class="top-info">
            <a href="javascript:void(0)" class="blue">
              <i class="fa fa-bar-chart animated" aria-hidden="true"></i>
            </a>
            <strong>
              <span class="font-lcd">
                {{cityInfo.currMonthUseTotal | convertNumber}}</span>
              <i style="font-weight:normal;font-style:normal;font-size:.5vw;">kw·h</i>
            </strong>
          </div>
        </div>
        <div class="analyise-raise">
          <div class="boxchart">
            截止<span class="squre">{{moment().format('YYYY-MM-DD')}}</span>同时段累计对比</div>
          <div class="number color-red" :class="{'color-green':Number(cityInfo.powerRate)<0}">
            <span class="font-lcd color-red">{{cityInfo.powerRate}}</span>%
            <i v-if="Number(cityInfo.powerRate)>0" class="fa fa-arrow-up" aria-hidden="true"></i>
            <i v-if="Number(cityInfo.powerRate)<0" class="fa fa-arrow-down" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-pie">
      <div class="panel-pie-header">
        <i class="icon"></i>
        <div class="title">实时功率TOP3</div>
      </div>
      <div class="panel-pie-footer">
        <pie />
      </div>
    </div>
    <div class="panel panel-bar">
      <div class="panel-bar-header">
        <i class="icon"></i>
        <div class="title">用电分析</div>
      </div>
      <div class="panel-bar-footer">
        <bar />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import "./index.scss";
import pie from "@/components/charts/pie";
import bar from "@/components/charts/bar";
import currencyUnit from "@/utils/currency-unit"
export default {
  computed: {
    ...mapGetters(["citys", "cityInfo"]),
    ...mapState({
      exceptionList: state => state.cityInfo.exceptionList,
      companyList: state => state.cityInfo.companyList
    })
  },
  filters: {
    convertNumber: str => currencyUnit(str)
  },
  components: {
    pie,
    bar
  }
};
</script>
